<template>
  <view class="battery-detail-container">
    <!-- 电池基本信息 -->
    <view class="battery-header">
      <view class="battery-code">
        <text class="code-text">{{batteryDetail.batterySn}}</text>
        <text class="status-badge" :class="'status-'+batteryDetail.businessStatus">
          {{businessStatusList[batteryDetail.businessStatus]}}
        </text>
      </view>
      <view class="battery-percent">
        <text class="percent-value">{{batteryDetail.soc}}%</text>
        <text class="percent-label">电量</text>
      </view>
    </view>

    <!-- 标签页 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'basic'}"
        @click="activeTab = 'basic'"
      >
        基本信息
      </view>
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'rental'}"
        @click="activeTab = 'rental'"
      >
        租赁记录
      </view>
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'bms'}"
        @click="activeTab = 'bms'"
      >
        BMS信息
      </view>
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'history'}"
        @click="activeTab = 'history'"
      >
        历史记录
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 基本信息 -->
      <view class="tab-content" v-if="activeTab === 'basic'">
        <view class="info-card">
          <view class="info-section">
            <text class="section-title">电池信息</text>
            <view class="info-grid">
              <view class="info-item">
                <text class="info-label">电池编号</text>
                <text class="info-value">{{batteryDetail.batterySn}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">电池品牌</text>
                <text class="info-value">{{batteryDetail.brand || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">电池类型</text>
                <text class="info-value">{{batteryDetail.batteryTypeName || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">电池容量</text>
                <text class="info-value">{{batteryDetail.capacity || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">额定电压</text>
                <text class="info-value">{{batteryDetail.currentVoltage || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">健康状态</text>
                <text class="info-value">{{batteryDetail.soh || '未知'}}</text>
              </view>
            </view>
          </view>

          <view class="info-section">
            <text class="section-title">业务信息</text>
            <view class="info-grid">
              <view class="info-item">
                <text class="info-label">业务状态</text>
                <text class="info-value">{{batteryDetail.businessStatus || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">循环次数</text>
                <text class="info-value">{{batteryDetail.cycleCount || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">GPS品牌</text>
                <text class="info-value">{{batteryDetail.gpsBrand || '未知'}}</text>
              </view>
              <view class="info-item">
                <text class="info-label">最后使用</text>
                <text class="info-value">{{batteryDetail.lastUsed || '未知'}}</text>
              </view>
            </view>
          </view>

          <view class="info-section" v-if="batteryDetail.remark">
            <text class="section-title">备注信息</text>
            <view class="remark-content">
              <text class="remark-text">{{batteryDetail.remark}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 租赁记录 -->
      <view class="tab-content" v-if="activeTab === 'rental'">
        <view class="rental-list">
          <view 
            class="rental-item" 
            v-for="record in rentalRecords" 
            :key="record.id"
          >
            <view class="rental-header">
              <text class="user-name">{{record.userName}}</text>
              <text class="rental-status" :class="'status-'+record.status">
                {{record.statusText}}
              </text>
            </view>
            <view class="rental-details">
              <view class="detail-row">
                <text class="detail-label">手机号：</text>
                <text class="detail-value">{{record.phone}}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">租借时间：</text>
                <text class="detail-value">{{record.rentTime}}</text>
              </view>
              <view class="detail-row" v-if="record.returnTime">
                <text class="detail-label">归还时间：</text>
                <text class="detail-value">{{record.returnTime}}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">使用时长：</text>
                <text class="detail-value">{{record.duration}}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">费用：</text>
                <text class="detail-value price">¥{{record.cost}}</text>
              </view>
            </view>
          </view>

          <view class="empty-state" v-if="rentalRecords.length === 0">
            <text class="empty-text">暂无租赁记录</text>
          </view>
        </view>
      </view>

      <!-- BMS信息 -->
      <view class="tab-content" v-if="activeTab === 'bms'">
        <view class="bms-info">
          <view class="bms-section">
            <text class="section-title">电池状态</text>
            <view class="bms-grid">
              <view class="bms-item">
                <text class="bms-label">当前电量</text>
                <text class="bms-value">{{batteryDetail.soc}}%</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">电压</text>
                <text class="bms-value">{{batteryDetail.currentVoltage}}V</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">电流</text>
                <text class="bms-value">{{batteryDetail.chargeCurrent}}A</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">容量</text>
                <text class="bms-value">{{batteryDetail.capacity}}Ah</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">健康状态</text>
                <text class="bms-value">{{batteryDetail.soh}}%</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">循环次数</text>
                <text class="bms-value">{{batteryDetail.cycleCount}}次</text>
              </view>
            </view>
          </view>

          <view class="bms-section">
            <text class="section-title">电池参数</text>
            <view class="bms-grid">
              <view class="bms-item">
                <text class="bms-label">电池充电时长	</text>
                <text class="bms-value">{{batteryDetail.chargeDuration}}</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">电池距离满电时长	</text>
                <text class="bms-value">{{batteryDetail.fullChargeDuration}}</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">电池BMS板温度</text>
                <text class="bms-value">{{batteryDetail.bmsTemperature}}</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">电池电芯温度</text>
                <text class="bms-value">{{batteryDetail.batteryTemperature}}</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">电池环境温度	</text>
                <text class="bms-value">{{batteryDetail.environmentTemperature}}</text>
              </view>
              <view class="bms-item">
                <text class="bms-label">BMS故障</text>
                <text class="bms-value">{{batteryDetail.bmsException}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="tab-content" v-if="activeTab === 'history'">
        <view class="history-list">
          <view 
            class="history-item" 
            v-for="record in historyRecords" 
            :key="record.id"
          >
            <view class="history-time">
              <text class="time-text">{{record.time}}</text>
            </view>
            <view class="history-content">
              <text class="history-title">{{record.title}}</text>
              <text class="history-desc" v-if="record.description">{{record.description}}</text>
            </view>
          </view>

          <view class="empty-state" v-if="historyRecords.length === 0">
            <text class="empty-text">暂无历史记录</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <button class="action-btn btn-default" @click="editBattery">编辑</button>
      <button class="action-btn btn-warning" @click="maintainBattery" v-if="batteryDetail.status === 'risk'">维护</button>
      <button class="action-btn btn-primary" @click="transferBattery">转移</button>
    </view>
  </view>
</template>

<script>
import api from '@/config/api.js'
export default {
  data() {
    return {
      batterySn: null,
      activeTab: 'basic',
	  businessStatusList:['未知','在柜' ,'在租'],
      batteryDetail: {
        "batterySn": "",
		"cabinetSn": "",
		"doorSn": 9,
		"batteryTypeName": "",
		"businessStatus": "",
		"memberName": "陈小雨",
		"memberMobile": "",
		"gpsBrand": "",
		"onlineStatus": 1,
		"currentVoltage": 0,
		"soc": 0,
		"soh": 0,
		"capacity": 0,
		"chargeDuration": 1.5,
		"fullChargeDuration": 1.5,
		"chargeCurrent": 4,
		"bmsTemperature": 45,
		"batteryTemperature": 45,
		"environmentTemperature": 45,
		"bmsException": "000",
		"bmsWarning": "000",
		"cycleCount": 120
	},
      rentalRecords: [],
      historyRecords: []
    }
  },

  onLoad(options) {
    this.batterySn = options.batterySn
    this.loadBatteryDetail()
  },

  methods: {
    async loadBatteryDetail() {
      try {
        const result = await api.battery.getBatteryList({keywords:this.batterySn})
        if (result) {
          this.batteryDetail = result.filter((item)=>item.batterySn==this.batterySn)[0]
        }
      } catch (error) {
        console.error('获取电池详情失败:', error)
      }
    },

    getStatusClass(status) {
      return {
        'status-inCabinet': status === 'inCabinet',
        'status-rented': status === 'rented',
        'status-risk': status === 'risk',
        'status-notReturned': status === 'notReturned'
      }
    },

    getRentalStatusClass(status) {
      return {
        'status-renting': status === 'renting',
        'status-returned': status === 'returned',
        'status-overdue': status === 'overdue'
      }
    },

    editBattery() {
      uni.navigateTo({
        url: `/pages/battery/edit?id=${this.batteryDetail.batteryId}`
      })
    },

    maintainBattery() {
      uni.showModal({
        title: '电池维护',
        content: '确定要对该电池进行维护操作吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '维护操作已提交',
              icon: 'success'
            })
          }
        }
      })
    },

    transferBattery() {
      uni.showToast({
        title: '转移功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.battery-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 电池头部 */
.battery-header {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}

.battery-code {
  display: flex;
  align-items: center;
}

.code-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.status-badge {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}

.status-0 {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-1 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-2 {
  background-color: #fff2e8;
  color: #fa541c;
}

.status-3 {
  background-color: #fff1f0;
  color: #f5222d;
}

.battery-percent {
  text-align: center;
}

.percent-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 4rpx;
}

.percent-label {
  font-size: 24rpx;
  color: #999;
}

/* 标签页 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  font-weight: bold;
  position: relative;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #007AFF;
  border-radius: 2rpx;
}

/* 内容区域 */
.content-area {
  padding: 20rpx;
}

.tab-content {
  background-color: #fff;
  border-radius: 16rpx;
  min-height: 400rpx;
}

/* 基本信息 */
.info-card {
  padding: 30rpx;
}

.info-section {
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.remark-content {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
}

.remark-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 租赁记录 */
.rental-list {
  padding: 30rpx;
}

.rental-item {
  background-color: #fafafa;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.rental-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #eee;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.rental-status {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.status-renting {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-returned {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-overdue {
  background-color: #fff1f0;
  color: #f5222d;
}

.detail-row {
  display: flex;
  margin-bottom: 8rpx;
  font-size: 24rpx;
}

.detail-label {
  color: #999;
  width: 140rpx;
}

.detail-value {
  color: #333;
  flex: 1;
}

.detail-value.price {
  color: #f5222d;
  font-weight: bold;
}

/* BMS信息 */
.bms-info {
  padding: 30rpx;
}

.bms-section {
  margin-bottom: 40rpx;
}

.bms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.bms-item {
  display: flex;
  flex-direction: column;
}

.bms-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.bms-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 历史记录 */
.history-list {
  padding: 30rpx;
}

.history-item {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.history-item:last-child {
  border-bottom: none;
}

.history-time {
  width: 200rpx;
  margin-right: 30rpx;
}

.time-text {
  font-size: 24rpx;
  color: #999;
}

.history-content {
  flex: 1;
}

.history-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.history-desc {
  font-size: 24rpx;
  color: #666;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #eee;
}

.action-btn {
  flex: 1;
  margin: 0 10rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  line-height: 80rpx;
}

.btn-default {
  background-color: #f5f5f5;
  color: #333;
  border: 1rpx solid #ddd;
}

.btn-warning {
  background-color: #fa541c;
  color: #fff;
}

.btn-primary {
  background-color: #007AFF;
  color: #fff;
}
</style>